<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环</title>
</head>
<body>
<div id="app">
    <!-- 城市列表 -->
    <select>
        <option v-for="city in cityList" v-text="city"></option>
    </select>

    <hr/>

    <!-- 用户列表 -->
    <table width="600px" border="1">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>地址</th>
        </tr>
        <tr v-for="(user,index) in userList">
            <td v-text="index+1"></td>
            <td v-text="user.name"></td>
            <td v-text="user.gender == 1?'男':'女'"></td>
            <td v-text="user.address"></td>
        </tr>
    </table>
</div>

<script src="js/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            cityList: ["北京", "上海", "广州", "深圳", "杭州"],
            userList: [{
                name: "李四",
                address: "广州",
                gender: 1
            }, {
                name: "张三",
                address: "深圳",
                gender: 1
            }, {
                name: "王五",
                address: "北京",
                gender: 2
            }, {
                name: "赵六",
                address: "上海",
                gender: 2
            }]
        }
    });
</script>
</body>
</html>